<template>
    <el-form ref="ruleFormRef" :model="formData" label-width="120px" class="demo-ruleForm" status-icon>
        <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-input v-model="formData.sex" />
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
            <!-- <el-input v-model="formData.birthday" /> -->
            <el-date-picker v-model="formData.birthday" type="date" placeholder="出生日期" style="width: 100%" value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-form-item label="院校类型" prop="typein">
            <el-input v-model="formData.typein" />
        </el-form-item>
        <el-form-item label="毕业学校" prop="graschool">
            <el-input v-model="formData.graschool" />
        </el-form-item>
        <el-form-item label="毕业时间" prop="gratime">
            <!-- <el-input v-model="formData.gratime" /> -->
            <el-date-picker v-model="formData.gratime" type="date" placeholder="毕业时间" style="width: 100%" value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-form-item label="证书编号" prop="certificateno">
            <el-input v-model="formData.certificateno" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                添加
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { eduInfoApi } from '@/api';

import { ElMessage } from 'element-plus';

import { useRouter } from 'vue-router'
const router = useRouter()

const ruleFormRef = ref()

const formData = reactive({
    name: '小美',
    sex: '女',
    birthday: '2020-09-06',
    typein: '普通高等大学',
    graschool: '清华大学',
    gratime: '2019-08-09',
    certificateno: '11023656'

})

const formSubMit = () => {
    eduInfoApi.insert.call({
        name: formData.name, 
        sex: formData.sex,
        birthday: formData.birthday,
        typein: formData.typein, 
        graschool: formData.graschool, 
        gratime: formData.gratime, 
        certificateno: formData.certificateno
    }).then((res: any) => {
        // console.log(res);

        ElMessage.success("添加成功")
        //路由跳转
        router.push({ name: 'educations-list' })
    })
}
 

const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            console.log('submit!')
            //调用后台api接口
            formSubMit()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: any) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped>
.el-form {
    margin-top: 20px;
}
</style>